import Vue from 'vue'
import Vuex from 'vuex'
import router, { resetRouter } from "@/router";
import request from "@/utils/request";
import ElementUI from "element-ui";
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    hasRoutes: false,
    uploadHeaders: localStorage.getItem("token") ? JSON.parse(localStorage.getItem("token")) : '',
    avatarUrl: localStorage.getItem("user") === null ? "" : JSON.parse(localStorage.getItem("user" || "[]")).avatarUrl,
    currentBackgroundIndex: 0,
    backgrounds: [
      require("../assets/background/home_background.webp"),
      // require("../assets/background/background2.jpg"),
      require("../assets/background/background3.jpg"),
      require("../assets/background/background4.jpg"),
      // require("../assets/background/background6.jpg"),
    ]
  },
  getters: {
  },
  mutations: {
    changeAvatarUrl() {
      let user = JSON.parse(localStorage.getItem("user"))
      console.log(this.state.avatarUrl)
      console.log(user.avatarUrl)
      this.state.avatarUrl = user.avatarUrl
    },
    logout() {
      request.post("/logout").then(res => {
        if (res.code === 200) {
          ElementUI.Message({
            message: "退出成功",
            type: 'info'
          });
          //清空缓存
          localStorage.clear()
        }
      })
      router.replace("/login")
    },
    SET_ROUTES_STATE: (state, hasRoutes) => {
      state.hasRoutes = hasRoutes
    },
    SET_BACKGROUND_INDEX(state, index) {
      state.currentBackgroundIndex = index;
    }
  },
  actions: {
    nextBackground({ commit, state }) {
      const nextIndex = (state.currentBackgroundIndex + 1) % state.backgrounds.length;
      commit('SET_BACKGROUND_INDEX', nextIndex);
    }
  },
  modules: {
  },
  getters: {
    currentBackground(state) {
      return {
        background: `url(${state.backgrounds[state.currentBackgroundIndex]})`,
        backgroundSize: '100% 100%',
        width: '100%',
        height: '100%',
        position: 'fixed'
      };
    }
  },

})
